<template>
  <div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="1200"
      :hideSelect="true"
      :requestType="true"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <template v-if="userInfo.shopRoleCode == 'role:store:main'">
            <a-form-item label="机构名称">
              <a-input
                style="width: 200px"
                v-decorator="['orgName']"
                placeholder="请输入机构名称"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
            <a-form-item label="店铺名称">
              <a-input
                style="width: 200px"
                v-decorator="['shopName']"
                placeholder="请输入店铺名称"
                autocomplete="off"
              >
              </a-input>
            </a-form-item>
          </template>

          <a-form-item label="分销员姓名">
            <a-input
              style="width: 200px"
              v-decorator="['distributorName']"
              placeholder="请输入分销员姓名"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="分销员手机号">
            <a-input
              style="width: 200px"
              v-decorator="['distributorPhone']"
              placeholder="请输入分销员手机号"
              autocomplete="off"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="成为分销员时间">
            <fast-range-picker
              allowClear
              v-decorator="['queryStartTime-queryEndTime']"
            >
            </fast-range-picker>
          </a-form-item>
        </a-form>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <permission authority="activity:order:query">
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="goDistributionDetails(record)"
            >详情</a
          >
        </permission>
      </template>
    </search-table>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "distribution",
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: "table_search" }),
      url: "/distributor/center/page",
      columns: [
        {
          title: "分销员姓名",
          dataIndex: "userName",
          key: "userName",
        },
        {
          title: "分销员手机号",
          dataIndex: "phone",
          key: "phone",
          // width: 130,
        },
        {
          title: "分销员所属机构",
          dataIndex: "orgName",
          key: "orgName",
        },
        {
          title: "分销员所属店铺",
          dataIndex: "shopName",
          key: "shopName",
        },
        {
          title: "成为分销员时间",
          dataIndex: "createDate",
          key: "createDate",
          // width: 125,
        },
        {
          title: "累计分销笔数",
          dataIndex: "accumulateDistributeTotal",
          key: "accumulateDistributeTotal",
          align: "center",
        },
        {
          title: "返利总额",
          dataIndex: "rebateTotalAmount",
          key: "rebateTotalAmount",
          align: "center",
          customRender: (text, row) => {
            return "￥" + (text / 100).toFixed(2);
          },
        },
        {
          title: "累计提现次数",
          dataIndex: "accumulateWithdrawTotal",
          key: "accumulateWithdrawTotal",
          align: "center",
        },
        {
          title: "累计提现金额",
          dataIndex: "accumulateWithdrawTotalAmount",
          key: "accumulateWithdrawTotalAmount",
          align: "center",
          customRender: (text, row) => {
            return "￥" + (text / 100).toFixed(2);
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
    };
  },
  methods: {
    goDistributionDetails(record) {
      this.$router.push({
        name: "GalleryFinancialManagementDistributionDistributionDetails",
        query: {
          id: record.id,
        },
      });
    },
  },
};
</script>
<style scoped lang="less">
</style>